<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../../css/colleectpostcss/collect.css">
        <script src="http://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
        <script th:inline="javascript">
            var userid = [[${userid}]];
            var page=1;
            var page1=(page-1)*12
            var count;
            $(function(){
                $.ajax({
                    url:'sctz.do?userid='+userid+'&page='+page1,
                    success:function(data) {//data服务器返回的数据
                        if (data.length != 0) {
                            var shuju = data[0].count
                            count = parseInt((shuju + 12 - 1) / 12)
                            zong = $("<p>共" + count + "页 合计" + shuju + "条数据</p>")
                            $("#shu").append(zong)
                            $.each(data, function (index, collectpost) {
                                //创建dom
                                tizi = $("<tr><td><a href=\"/html/editor/viewPost.do?pid="+collectpost.pid+"\" target=\'_top\'>" + collectpost.ptitle + "</a>" + "</td>"
                                    + "<td>" + collectpost.ptype + "</a>" + "</td>"
                                    + "<td>" + collectpost.username + "</a>" + "</td>"
                                    + "<td>" + collectpost.ptime + "</a>" + "</td></tr>")
                                $("#showcollectpost").append(tizi);//渲染完毕
                            })
                        }
                        else {
                            count=0
                            zong = $("<p>共0页 合计0条数据</p>")
                            $("#shu").append(zong)
                        }
                    }
                });
                $("#page1").css("background-color","yellow")

            });
            function f() {
                    page = 1;
                    page1 = (page - 1) * 12
                    $("#showcollectpost").empty();
                    lianjie(page1)
                    $("#page1").css("background-color", "yellow")
                    $("#page2").css("background-color", "white")
                    $("#page3").css("background-color", "white")


            }
            function f1() {
                if (count>=2) {
                    page = 2;
                    page1 = (page - 1) * 12
                    $("#showcollectpost").empty();
                    lianjie(page1)
                    $("#page2").css("background-color", "yellow")
                    $("#page1").css("background-color", "white")
                    $("#page3").css("background-color", "white")
                }
            }
            function f2() {
                if (count>=3) {
                    page = 3;
                    page1 = (page - 1) * 12
                    $("#showcollectpost").empty();
                    lianjie(page1)
                    $("#page3").css("background-color", "yellow")
                    $("#page1").css("background-color", "white")
                    $("#page2").css("background-color", "white")
                }
            }
            function shouye() {
                f()

            }
            function lianjie(page1) {
                $.ajax({
                    url:'sctz.do?userid='+userid+'&page='+page1,
                    success:function(data){//data服务器返回的数据
                        $.each(data,function(index,collectpost){
                            //创建dom
                            tizi=$("<tr><td><a href=\"/html/editor/viewPost.do?pid="+collectpost.pid+"\" target=\'_top\'>"+collectpost.ptitle+"</a>" + "</td>"
                                +"<td>"+collectpost.ptype+"</a>" + "</td>"
                                +"<td>"+collectpost.username+"</>" + "</td>"
                                +"<td>"+collectpost.ptime+"</a>" + "</td></tr>")
                            $("#showcollectpost").append(tizi);//渲染完毕
                        })
                    }
                });

            }
            function lastpage() {
                if (page > 1) {
                    page = page - 1
                    if (page == 1) {
                        f()
                    } else if (page == 2) {
                        f1()
                    } else if (page == 3) {
                        f2()
                    } else if (page > 0) {
                        page1 = (page - 1) * 12
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        if (page > 0) {
                            $("#showcollectpost").empty();
                            lianjie(page1)
                        }
                    }
                }
            }
            function nextpage() {
                if (page < count) {
                    page = page + 1
                    if (page == 1) {
                        f()
                    } else if (page == 2) {
                        f1()
                    } else if (page == 3) {
                        f2()
                    } else if (page <= count) {
                        page = 4;
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        page1 = (page - 1) * 12
                        $("#showcollectpost").empty();
                        lianjie(page1)
                    }

                }
            }
            function tiaozhuang() {
                var p = $("#tiao").val()
                if (p <= count && p > 0) {
                    console.log(p)
                    if (p == 1) {
                        f()
                    } else if (p == 2) {
                        f1()
                    } else if (p == 3) {
                        f2()
                    } else if (p <= count) {
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        $("#tiao").val("")
                        page1 = (page - 1) * 12
                        $("#showcollectpost").empty();
                        lianjie(page1)
                    }

                }
            }
            function weiye() {
                page=count;
                if (page==1){
                    f()
                }
                if (page==2){
                    f1()
                }
                if (page==3){
                    f2()
                }
                if (page>3){
                    $("#page2").css("background-color","white")
                    $("#page1").css("background-color","white")
                    $("#page3").css("background-color","white")
                    page1=(page-1)*12
                    $("#showcollectpost").empty();
                    lianjie(page1)
                }

            }
        </script>

    </head>
    <body>
        <div class="zong">
            <div class="main">
                <div class="table">
                    <table>
                    <thead>
                        <tr>
                            <td>
                             贴子标题
                            </td>
                            <td>版块/群组</td>
                            <td>作者</td>
                            <td>作者发帖时间</td>
                            
                        </tr>
                    </thead>
                    <tbody id="showcollectpost">
                    </tbody>
                </table>
            </div>
            <div class="page">
                <div class="g">
                    <span><a href="javascript:void(0)" onclick="shouye()">首页</a></span>
                    <span><a href="javascript:void(0)" onclick="lastpage()">上一页</a></span>
                    <ul>
                        <li id="page1" onclick="f()"><a href="javascript:void(0)">1</a></li>
                        <li id="page2" onclick="f1()"><a href="javascript:void(0)">2</a></li>
                        <li id="page3" onclick="f2()"><a href="javascript:void(0)">3</a></li>
                    </ul>
                    <span><a href="javascript:void(0)" onclick="nextpage()">下一页</a></span>
                    <span><a href="javascript:void(0)" onclick="weiye()">尾页</a></span>
                    <form >
                        <input type="text" id="tiao">
                        <input type="button" value="跳转" id="tiaobutton" onclick="tiaozhuang()">
                    </form>
                    <p id="shu"></p>
                </div>               
            </div>
                
            </div>
        </div>
        
    </body>

</html>